<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model="queryParams.nickname" placeholder="昵称" clearable />
			</el-form-item>
			<!-- <el-form-item label="跟进类型" prop="type">
				<el-select v-model="queryParams.type" placeholder="请选择跟进类型" clearable>
					<el-option v-for="dict in LeiXingArr" :key="dict.id" :label="dict.name" :value="dict.name" />
				</el-select>
			</el-form-item>
			<el-form-item label="跟进人" prop="employeeName" v-hasPermi="['system:documentary:genjin']">
				<el-select v-model="queryParams.employeeName" placeholder="请选择跟进人">
					<el-option v-for="user in employeeList" :key="user.userId" :label="user.userName"
						:value="user.userName"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="跟进时间">
				<el-date-picker v-model="queryParams.aa" type="daterange" range-separator="-" start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<!-- <el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['system:documentary:add']">新增</el-button>
			</el-col> -->
			<!-- <el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
					v-hasPermi="['system:documentary:edit']">修改</el-button>
			</el-col> -->

			<!-- <el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete" v-hasPermi="['system:documentary:remove']">删除</el-button>
			</el-col> -->
			<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
		</el-row>

		<el-table v-loading="loading" :data="userList">
			<el-table-column show-overflow-tooltip label="创建时间" width="180" align="center" prop="creationTime">
			</el-table-column>
			<el-table-column show-overflow-tooltip label="昵称" width="120" align="center" prop="nickname">
			</el-table-column>
			<el-table-column width="100" label="头像" align="center" prop="createTime">
				<template slot-scope="scope">
					<el-image style="width: 40px; height: 40px" :src="scope.row.headimgurl"
						:preview-src-list="scope.row.imgs">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip width="150" label="手机号" align="center" prop="phone" />
			<el-table-column show-overflow-tooltip width="100" label="求职类型" align="center" prop="huntingType" />
			<el-table-column show-overflow-tooltip width="100" label="学历" align="center" prop="background" />
			<el-table-column show-overflow-tooltip width="100" label="是否应届" align="center" prop="stressStatus" />
			<el-table-column show-overflow-tooltip width="100" label="年龄(周岁)" align="center" prop="age" />
			<el-table-column show-overflow-tooltip width="100" label="毕业时间" align="center" prop="graduateTime" />
			<el-table-column show-overflow-tooltip width="100" label="政治面貌" align="center" prop="politics" />
			<el-table-column show-overflow-tooltip width="150" label="求职地点" align="center" prop="searchLocation" />
			<el-table-column show-overflow-tooltip width="150" label="籍贯" align="center" prop="nativePlace" />
			<el-table-column show-overflow-tooltip width="200" label="毕业院校所在城市" align="center" prop="graduateCity" />
			<el-table-column show-overflow-tooltip width="100" label="毕业院校类别" align="center" prop="graduateType" />
			<el-table-column show-overflow-tooltip width="180" label="实习或项目经历" align="center"
				prop="projectExperience" />
			<el-table-column show-overflow-tooltip width="200" label="就读专业" align="center">
				<template slot-scope="scope">
					<div v-for="it in scope.row.wechatMajorWscpList">{{it.majorName}}</div>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip width="150" label="是否过英语4级" align="center" prop="englishFour" />
			<el-table-column show-overflow-tooltip width="150" label="是否过英语六级" align="center" prop="englishSix" />
			<el-table-column show-overflow-tooltip width="150" label="是否过计算机2级" align="center" prop="computerTwo" />
			<el-table-column show-overflow-tooltip width="100" label="技能证书" align="center" prop="skillCertificate" />
			<el-table-column show-overflow-tooltip width="100" label="校园实践" align="center" prop="campusPractice" />
			<el-table-column show-overflow-tooltip width="100" label="获奖情况" align="center" prop="scholarship" />
			<el-table-column show-overflow-tooltip width="100" label="姓氏" align="center" prop="familyName" />
			<el-table-column show-overflow-tooltip width="100" label="性别" align="center" prop="sex" />
			<!-- <el-table-column label="联系方式" align="center" prop="phone" /> -->
			<el-table-column width="200" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="success" style="padding: 10px 10px;"
						@click="handleDetail(scope.row)">详情</el-button>
					<el-button size="mini" type="primary" style="padding: 10px 10px;"
						@click="prBg(scope.row)">查看报告</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<el-dialog title="详情" :visible.sync="DetailVisible" width="70%" :close-on-click-modal="false">
			<el-descriptions class="margin-top" title="详情信息" :column="3" border>
				<el-descriptions-item>
					<template slot="label">
						昵称
					</template>
					{{userDetail.nickname}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						头像
					</template>
					<el-image style="width: 40px; height: 40px" :src="userDetail.headimgurl"
						:preview-src-list="userDetail.imgs">
					</el-image>
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						手机号
					</template>
					{{userDetail.phone}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						求职类型
					</template>
					{{userDetail.huntingType}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						学历
					</template>
					{{userDetail.background}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						是否应届
					</template>
					{{userDetail.stressStatus}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						年龄(周岁)
					</template>
					{{userDetail.age}}
				</el-descriptions-item>

				<el-descriptions-item>
					<template slot="label">
						毕业时间
					</template>
					{{userDetail.graduateTime}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						政治面貌
					</template>
					{{userDetail.politics}}
				</el-descriptions-item>

				<el-descriptions-item>
					<template slot="label">
						求职地点
					</template>
					{{userDetail.searchLocation}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						籍贯
					</template>
					{{userDetail.nativePlace}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						毕业院校所在城市
					</template>
					{{userDetail.graduateCity}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						毕业院校类别
					</template>
					{{userDetail.graduateType}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						实习或项目经历
					</template>
					{{userDetail.projectExperience}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						就读专业
					</template>
					<div v-for="it in userDetail.wechatMajorWscpList" style="margin-right: 8px;">{{it.majorName}}</div>
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						是否过英语4级
					</template>
					{{userDetail.englishFour}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						是否过英语六级
					</template>
					{{userDetail.englishSix}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						是否过计算机2级
					</template>
					{{userDetail.computerTwo}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						技能证书
					</template>
					{{userDetail.skillCertificate}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						校园实践
					</template>
					{{userDetail.campusPractice}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						获奖情况
					</template>
					{{userDetail.scholarship}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						姓氏
					</template>
					{{userDetail.familyName}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						性别
					</template>
					{{userDetail.sex}}
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>


	</div>
</template>

<script>
	import {
		listUserApi,
		cpDetail
	} from "@/api/all/userApi";
	export default {
		name: "Documentary",
		data() {
			return {
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					nickname: '',
					cepingStatus:1
				},
				dialogVisible: false,
				userList: [], //存取后端获取客户列表
				DetailVisible: false,
				userDetail: {}
			};
		},
		created() {
			this.getList();
			console.log(this.$store.state.user.nickName, 'nickName');
		},
		methods: {
			prBg(row){
				console.log(row,'row');
				if(row.reportUrl){
					window.open(`${row.reportUrl}`);
				}else{
					this.$modal.msgWarning("此用户未生成报告");
				}
			},
			// 详情
			handleDetail(e) {
				console.log(e);
				this.userDetail = e
				// cpDetail(e.openid).then(res=>{
				// 	console.log(res,'res');
				// })
				this.DetailVisible = true
			},

			/** 查询跟单详情列表 */
			getList() {
				this.loading = true;
				listUserApi(this.queryParams).then(response => {
					console.log(response, 'response');
					response.rows.forEach(it => {
						it.imgs = []
						it.imgs.push(it.headimgurl)
					})
					this.userList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				// this.resetForm("queryForm");
				this.queryParams = {
						pageNum: 1,
						pageSize: 10,
						nickname: '',
						cepingStatus:1
					},
					this.handleQuery();
			},
		}
	};
</script>
<style>
	.el-tooltip__popper {

		max-width: 800px;

	}

	::v-deep .el-upload-list__item .is-success.focusing .el-icon-close-tip {
		display: none !important;
	}

	.el-upload--picture-card {
		width: 100%;
		height: 100%;
	}

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		width: 100%;
		height: 100%;
	}
</style>